<template>
    <div class="shopCar-container">
        <!--  商品列表区域      -->
        <div class="good-list" v-for="(item,index) in shopcargoodslist" :key="item.id">
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <mt-switch v-model="$store.getters.getGoodsSelected[item.id]"
                                   @change="selecedChange(item.id,$store.getters.getGoodsSelected[item.id])">
                        </mt-switch>
                        <img :src="item.thumb_path">
                        <div class="info">
                            <h1>{{item.title}}</h1>
                            <p>
                                <span class="price">￥{{item.sell_price}}</span>
                                <!-- 父组件向子组件传值，子组件在props里面接收-->
                                <shopcarnumbox :initcount="$store.getters.getShopCarCount[item.id]"
                                               :goodsid="item.id"></shopcarnumbox>
                                <!--  问题：如何从购物车中获取商品的数量呢？
                                1.我们可以先创建一个 空对象，然后循环购物车中所有商品的数据、
                                把当前循环的这条商品的id，作为这个对象的属性名，count值作为对象的
                                属性值，这样，当把所有的商品循环一遍，就会得到一个对象：{87：3}
                                 -->

                                <a href="#" @click.prevent="removegoods(item.id,index)">删除</a>
                            </p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- 结算区域-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner pay">
                    <div class="left">
                        <p>总计（不含运费）</p>
                        <p>已勾选商品<span class="red">{{$store.getters.getGoodsCountAndAmount.count}}</span>件，
                            总价 <span class="red">￥{{$store.getters.getGoodsCountAndAmount.amount}}元</span>
                        </p>
                    </div>
                    <mt-button type="danger">去结算</mt-button>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
    import shopcarnumbox from '../../subcomponents/shopcar_number.vue'
    //导入弹出框组件
    import {Toast} from 'mint-ui'

    export default {
        data() {
            return {
                shopcargoodslist: []//购物车商品列表
            }
        },
        created() {
            this.getGoodsList();
        },
        methods: {
            getGoodsList() {//获取购物车商品列表的函数
                //1.获取到store中所有商品的id，然后拼接出一个 用逗号分隔的字符串
                var idArr = [];//先定义一个空数组接收
                this.$store.state.car.forEach(item => {
                    idArr.push(item.id);
                });
                //判断购物车是否为空，当购物车为空时，就不请求数据了
                if (idArr.length == 0) {
                    return;
                }
                this.axios.get('api/goods/getshopcarlist/' + idArr.join(","))
                    .then(result => {
                        this.shopcargoodslist = result.data.message;
                    }).catch(result => {
                    Toast('获取购物车商品列表失败了!!!');
                });
            },
            removegoods(id, index) {
                //删除购物车商品的函数
                //点击删除，通过传递的id值把商品从store中删除，通过传递的index，
                // 把商品从当前组件中的shopcargoodslist删除。
                this.shopcargoodslist.splice(index, 1);
                this.$store.commit("removeFormCar", id);
            },
            selecedChange(id, val) {
                //改变商品的状态，改变了，就立即把最新的状态同步到store中，覆盖之前的状态
                console.log(id + '-----' + val);
                this.$store.commit("updateselected", {id,selected: val});
            },
        },
        components: {
            //将子组件挂载到父组件身上、
            shopcarnumbox
        }
    }
</script>
<style lang="scss" scoped>
    .shopCar-container {
        background-color: #eeeeee;
        overflow: hidden;

        .good-list {
            .mui-card {
                width: 100%;

                .mui-card-content-inner {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    mt-switch {

                    }

                    img {
                        width: 60px;
                        height: 60px;
                        display: block;
                        margin-left: 20px;
                        background-color: #8a6de9;
                    }

                    .info {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        h1 {
                            font-size: 23px;
                        }

                        span {
                            color: #cf2d28;
                            font-size: 18px;
                        }

                        p {
                            font-size: 18px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                        }
                    }
                }


            }

        }

        .pay {
            display: flex;
            justify-content: space-between;
            align-items: center;

            /deep/ .red {
                color: #cf2d28;
                font-size: 20px;
                font-weight: bold;
            }
        }
    }
</style>